<template>
  <div>
    <div v-if="type === 'demand'">
      <FormPanel :list="formList" :cols="3" :isSubmitBtn="false" :collapse="false" />
      <FilterTables
        ref="table"
        :columns="columns"
        :dataSource="tableList"
        :isMemoryPagination="true"
        :isSelectColumn="false"
        height="240"
        :onColumnsChange="(columns) => (this.columns = columns)"
      ></FilterTables>
    </div>
    <div v-if="type === 'follow'">
      <FormPanel :list="followUpFormList" :cols="3" :isSubmitBtn="false" :collapse="false" />
      <FilterTables
        ref="tableUp"
        :columns="columnsUp"
        :dataSource="tableListUp"
        :isMemoryPagination="true"
        :isSelectColumn="false"
        height="240"
        :onColumnsChange="(columns) => (this.columns = columns)"
      >
      </FilterTables>
    </div>
    <div
      :style="{
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'right',
      }"
    >
      <el-button @click="closeDrawer()">关 闭</el-button>
    </div>
  </div>
</template>
<script>
import { dictionary } from '@/utils/dictMixin';
import { queryAllSeries, queryAllModelBySeries } from '@/api/omSaleP/KeyCustomers/KeyCustomerInfoVerify/index.js';
import { confirmAction } from '@/utils';
import moment from 'moment';
export default {
  props: {
    type: {
      type: String,
      require: true,
    },
    rowData: {
      type: Object,
    },
  },
  data() {
    return {
      formList: [
        {
          type: 'BREAK_SPACE',
          label: '大客户需求信息',
        },
      ],
      followUpFormList: [
        {
          type: 'BREAK_SPACE',
          label: '大客户跟进信息',
        },
      ],
      columns: this.createdTable(),
      columnsUp: this.createdTableUp(),
      tableListUp: [],
      tableList: [],
      datailData: {},
      demandSeries: [],
      demandModel: [],
    };
  },
  created() {},
  async mounted() {
    //获取所有车系数据
    await this.queryAllSeries();
    //初始化页面
    if (this.rowData.id) {
      this.init();
    }
  },
  mixins: [dictionary],
  methods: {
    //初始化页面数据
    async init() {
      if (this.type === 'demand') {
        this.tableList = this.rowData.demandList;
        this.tableList.forEach(async (item) => {
          item.demandSeriesName = this.getName(this.demandSeries, item.demandSeriesId);
          await this.queryAllModelBySeries(item.demandSeriesId);
          item.demandModelName = this.getName(this.demandModel, item.demandModelId);
          console.log('modelName', item.demandModelName);
          this.tableList = [...this.tableList];
          // this.$forceUpdate();
        });
      } else if (this.type === 'follow') {
        this.tableListUp = [...this.rowData.followList];
        this.$forceUpdate();
      }
    },
    // 获取所有车系
    async queryAllSeries() {
      const res = await queryAllSeries();
      if (res.resultCode === 200) {
        this.demandSeries = res.data.map((y) => ({ text: y.seriesName, value: y.seriesId }));
      }
    },
    //根据车系id查询车型
    async queryAllModelBySeries(id) {
      if (id) {
        const res = await queryAllModelBySeries({ pageNum: id });
        if (res.resultCode === 200) {
          this.demandModel = res.data.map((y) => ({ text: y.modelName, value: y.modelId }));
        }
      }
    },
    // 获取车系、车型名称
    getName(list, id) {
      const filterList = list.filter((item) => item.value === id);
      if (filterList.length > 0) {
        return filterList[0].text;
      }
      return '';
    },
    //关闭
    async closeDrawer(type = 'close') {
      if (type === 'close') {
        this.$emit('close');
        return;
      }
    },
    createdTable() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          fixed: 'left',
          render: (props) => {
            return <span>{props.row.index + 1}</span>;
          },
        },
        {
          title: '需求车系',
          dataIndex: 'demandSeriesId',
          sorter: true,
          filter: true,
          filterType: 'input',
          render: (p) => {
            return <span>{p.row.demandSeriesName}</span>;
          },
        },
        {
          title: '需求车型',
          dataIndex: 'demandModelId',
          sorter: true,
          filter: true,
          filterType: 'input',
          render: (p) => {
            return <span>{p.row.demandModelName}</span>;
          },
        },
        {
          title: '需求数量',
          dataIndex: 'demandNum',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '预计采购时间',
          dataIndex: 'expectPurchaseDate',
          sorter: true,
          filter: true,
          filterType: 'date-range',
          dateFormat: 'yyyy-MM-dd',
        },
        {
          title: '采购方式',
          dataIndex: 'purchaseType',
          sorter: true,
          filter: true,
          filterType: 'input',
          render: (p) => {
            return <span>{this.createDictText(p.row.purchaseType, '2142')}</span>;
          },
        },
        {
          title: '预计采购价格',
          dataIndex: 'expectPurchasePrice',
          sorter: true,
          filter: true,
          precision: 2,
          numberFormat: true,
          align: 'right',
          filterType: 'input',
        },
        {
          title: '市场指导价',
          dataIndex: 'marketDirectivePrice',
          sorter: true,
          filter: true,
          precision: 2,
          numberFormat: true,
          align: 'right',
          filterType: 'input',
        },
      ];
    },
    createdTableUp() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          fixed: 'left',
          render: (props) => {
            return <span>{props.row.index + 1}</span>;
          },
        },
        {
          title: '意向级别',
          dataIndex: 'intentionType',
          sorter: true,
          filter: true,
          filterType: 'input',
          render: (p) => {
            return <span>{this.createDictText(p.row.intentionType, '2143')}</span>;
          },
        },
        {
          title: '跟进结果',
          dataIndex: 'followResultType',
          sorter: true,
          filter: true,
          filterType: 'input',
          render: (p) => {
            return <span>{this.createDictText(p.row.followResultType, '2144')}</span>;
          },
        },
        {
          title: '跟进时间',
          dataIndex: 'followDate',
          sorter: true,
          filter: true,
          filterType: 'input',
          dateFormat: 'yyyy-MM-dd',
        },
        {
          title: '跟进方式',
          dataIndex: 'followType',
          sorter: true,
          filter: true,
          filterType: 'input',
          render: (p) => {
            return <span>{this.createDictText(p.row.followType, '2145')}</span>;
          },
        },
        {
          title: '跟进内容',
          dataIndex: 'followContent',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '跟进人',
          dataIndex: 'followPersonName',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '预计下次跟进时间',
          dataIndex: 'nextFollowDate',
          sorter: true,
          filter: true,
          filterType: 'input',
          dateFormat: 'yyyy-MM-dd',
        },
      ];
    },
  },
};
</script>